<!DOCTYPE html>
<html>
<head>
  <title>符文手册</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <style>
    * {font-family:helvetica; font-size:11px;}
    .fuwen {border-bottom:1px solid #ddd;}
    .fuwen_lv {border-right:1px solid #ddd; padding:10px; text-align:center;}
    .fuwen_lv.widthI, .fuwen_lv.widthII {width:152px;}
    .fuwen_lv.widthIII {width:75px;}
    .fuwen_lv.unlock_color {background-color:#bdb}
    .fuwen_lv.lock_color {background-color:white}
    .fuwen_lv_text {margin-bottom:1em;}
    .fuwen_desc {padding:10px; text-align:center; width:100px;}
    .fuwen strong {font-weight:bold; font-size:13px; margin-bottom: 10px;}
    .pet {margin-right:10px; text-align:center; width:66px; height:120px; position:relative;}
    .pet img {width:100%;}
    .pet img.have_false {opacity:0.2}
    .pet input {position:absolute; bottom:35px; right:0px;}
    .white {border:2px solid #ddd;}
    .green {border:2px solid #aea;}
    .blue {border:2px solid #59f;}
    .purple {border:2px solid #b4b;}
    .orange {border:2px solid #d70;}
    .floatleft {float:left;}
    .clear {clear:both;}
  </style>
</head>
<body ng-app="myApp">
  <div id="content" ng-controller="myCtrl">
    <!-- 宠物列表 -->
    <div class="pets">
      <div class="pet floatleft" ng-repeat="petname in petnames | orderBy:sortPetList" ng-if="petname != '任意宠物'">
        <img class="{{pets[petname].color}} have_{{pets[petname].have}}" alt="{{pets[petname].name}} (谁有图告诉我下)" ng-src="{{pets[petname].img}}"><br>
        <input type="checkbox" ng-model="pets[petname].have"/>
        {{petname}}<br>
      </div>
      <div class="clear"></div>
    </div>
    <!-- 符文列表 -->
    <div class="fuwen" ng-repeat="(fuwen_name,fuwen) in fuwens">
      <!-- 每种符文分三个等级 -->
      <div class="fuwen_lv width{{fuwen_lv}} {{unlockState(condition)}}_color floatleft" ng-repeat="(fuwen_lv,condition) in fuwen.unlock_condition">
        <div class="fuwen_lv_text"><strong>{{fuwen_name}}{{fuwen_lv}}</strong></div>
        <!-- 每个等级解锁需要的宠物 -->
        <div class="pets">
          <!-- 每只宠物的图片，名称和解锁需要的等级 -->
          <div class="pet floatleft" ng-repeat="petname in condition.pets">
            <img class="{{pets[petname].color}}" alt="{{petname}} (谁有图告诉我下)" ng-src="{{pets[petname].img}}"/><br>
            <input type="checkbox" ng-model="pets[petname].have"/>
            {{petname}}<br>
            Lv{{condition.lv}}
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <!-- 每种符文的描述 -->
      <div class="fuwen_desc floatleft">
        <strong>{{fuwen_name}}</strong><br>
        {{fuwen.desc}}
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      var colorOrder = {'white':0, 'green':1, 'blue':2, 'purple':3, 'orange':4};
      $scope.unlockState = function(condition) {
        for(var i=0; i<condition.pets.length; i++) {
          var petname = condition.pets[i];
          if ($scope.pets[petname].have == false) {
            return 'lock';
          }
        }
        return 'unlock';
      }
      $scope.sortPetList = function(petname) {
        var pet = $scope.pets[petname];
        return [-pet.have, colorOrder[pet.color]];
      }
      $scope.pets = {
        '任意宠物': {color:'white', have:true, img:'http://boli.37man.com/uploads/bases/20160707/012217c66cf603498e29488715a443bc.jpg'},
        '疯兔': {color:'white', have:true, img:'http://boli.37man.com/media/boli/pet/list/1.jpg'},
        '绿棉虫': {color:'white', have:true, img:'http://boli.37man.com/media/boli/pet/list/3.jpg'},
        '工蚁': {color:'white', have:false, img:'http://boli.37man.com/media/boli/pet/list/34.jpg'},
        '波利': {color:'green', have:true, img:'http://boli.37man.com/media/boli/pet/list/2.jpg'},
        '盗虫': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/7.jpg'},
        '蝗虫': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/8.jpg'},
        '螃蟹': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/9.jpg'},
        '曼陀罗花': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/11.jpg'},
        '白鼠': {color:'green', have:true, img:'http://boli.37man.com/media/boli/pet/list/12.jpg'},
        '榔头哥布灵': {color:'green', have:true, img:'http://boli.37man.com/media/boli/pet/list/13.jpg'},
        '白蚁': {color:'green', have:true, img:'http://boli.37man.com/media/boli/pet/list/14.jpg'},
        '邪骇战士': {color:'green', have:true, img:'http://boli.37man.com/media/boli/pet/list/16.jpg'},
        '白幽灵': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/19.jpg'},
        '大斧哥布灵': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/38.jpg'},
        '刺刀哥布灵': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/40.jpg'},
        '蘑菇': {color:'green', have:true, img:'http://boli.37man.com/media/boli/pet/list/41.jpg'},
        '刺锤哥布灵': {color:'green', have:true, img:'http://boli.37man.com/media/boli/pet/list/43.jpg'},
        '僵尸': {color:'green', have:true, img:'http://boli.37man.com/media/boli/pet/list/48.jpg'},
        '邪骸战士': {color:'green', have:true, img:'http://boli.37man.com/uploads/bases/20160707/4299432bbd8a388ad519eb6ba0b8adc7.jpg'},
        '蓝疯兔': {color:'blue', have:true, img:'http://boli.37man.com/media/boli/pet/list/4.jpg'},
        '大脚熊': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/5.jpg'},
        '达拉蛙': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/10.jpg'},
        '野猪': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/15.jpg'},
        '吸血蝙蝠': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/17.jpg'},
        '克瑞米': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/18.jpg'},
        '妖道': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/23.jpg'},
        '土波利': {color:'blue', have:true, img:'http://boli.37man.com/media/boli/pet/list/26.jpg'},
        '弓箭哥布灵': {color:'blue', have:true, img:'http://boli.37man.com/media/boli/pet/list/27.jpg'},
        '邪骸弓箭手': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/28.jpg'},
        '黑蚁': {color:'blue', have:true, img:'http://boli.37man.com/media/boli/pet/list/29.jpg'},
        '艾吉欧蜈蚣': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/31.jpg'},
        '溜溜猴': {color:'blue', have:true, img:'http://boli.37man.com/media/boli/pet/list/35.jpg'},
        '波波利': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/36.jpg'},
        '蝙蝠弓箭手': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/37.jpg'},
        '蜂兵': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/42.jpg'},
        '红蝙蝠': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/47.jpg'},
        '兽人婴儿': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/50.jpg'},
        '小恶魔': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/51.jpg'},
        '兵蚁': {color:'purple', have:false, img:'http://boli.37man.com/media/boli/pet/list/6.jpg'},
        '天使波利': {color:'purple', have:true, img:'http://boli.37man.com/media/boli/pet/list/20.jpg'},
        '南瓜先生': {color:'purple', have:true, img:'http://boli.37man.com/media/boli/pet/list/22.jpg'},
        '恶魔波利': {color:'purple', have:false, img:'http://boli.37man.com/media/boli/pet/list/24.jpg'},
        '哥布灵王': {color:'purple', have:true, img:'http://boli.37man.com/media/boli/pet/list/32.jpg'},
        '狸猫': {color:'purple', have:false, img:'http://boli.37man.com/media/boli/pet/list/39.jpg'},
        '喷射哥布灵': {color:'purple', have:true, img:'http://boli.37man.com/media/boli/pet/list/44.jpg'},
        '幽灵波利': {color:'purple', have:false, img:'http://boli.37man.com/media/boli/pet/list/52.jpg'},
        '巴风特': {color:'orange', have:false, img:'http://boli.37man.com/media/boli/pet/list/21.jpg'},
        '黄金虫': {color:'orange', have:false, img:'http://boli.37man.com/media/boli/pet/list/25.jpg'},
        '蚁后': {color:'orange', have:false, img:'http://boli.37man.com/media/boli/pet/list/30.jpg'},
        '海盗之王': {color:'orange', have:false, img:'http://boli.37man.com/media/boli/pet/list/33.jpg'},
        '蜂后': {color:'orange', have:false, img:'http://boli.37man.com/media/boli/pet/list/45.jpg'},
        '小巴风特': {color:'orange', have:false, img:'http://boli.37man.com/media/boli/pet/list/46.jpg'},
        '俄赛里斯': {color:'orange', have:false, img:'http://boli.37man.com/media/boli/pet/list/49.jpg'},
        '直升机哥布灵': {color:'purple', have:false, img:'http://boli.37man.com/media/boli/pet/list/53.jpg'},
        '树精': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/54.jpg'},
        '海葵': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/55.jpg'},
        '邪骸海盗': {color:'blue', have:false, img:'http://boli.37man.com/media/boli/pet/list/56.jpg'},
        '马克': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/57.jpg'},
        '兽人战士': {color:'green', have:false, img:'http://boli.37man.com/media/boli/pet/list/58.jpg'},
      };//pets
      $scope.petnames = [];
      for(var key in $scope.pets) {
        $scope.petnames.push(key);
      }
      $scope.fuwens = {
        '生存': {
          desc:'减伤',
          unlock_condition: {
            'I': {pets:['任意宠物'], lv:60},
            'II': {pets:['任意宠物'], lv:80},
            'III': {pets:['任意宠物'], lv:100}
          }
        },
        '天使': {
          desc:'加暴击且暴击回血',
          unlock_condition: {
            'I': {pets:['疯兔','绿棉虫'], lv:40},
            'II': {pets:['白鼠','蓝疯兔'], lv:60},
            'III': {pets:['恶魔波利'], lv:100},
          }
        },
        '魔法': {
          desc:'技能不被打断',
          unlock_condition: {
            'I': {pets:['螃蟹','野猪'], lv:40},
            'II': {pets:['大脚熊','小恶魔'], lv:60},
            'III': {pets:['狸猫'], lv:100},
          }
        },
        '赠礼': {
          desc:'增加伤害',
          unlock_condition: {
            'I': {pets:['弓箭哥布灵','邪骸弓箭手'], lv:40},
            'II': {pets:['蝙蝠弓箭手','兽人弓箭手'], lv:60},
            'III': {pets:['喷射哥布灵'], lv:100},
          }
        },
        '水流': {
          desc:'回血',
          unlock_condition: {
            'I': {pets:['波利','波波利'], lv:40},
            'II': {pets:['吸血蝙蝠','僵尸'], lv:60},
            'III': {pets:['天使波利'], lv:100},
          }
        },
        '寒冰': {
          desc:'恢复SP',
          unlock_condition: {
            'I': {pets:['曼陀罗花','克瑞米'], lv:40},
            'II': {pets:['蘑菇','妖道'], lv:60},
            'III': {pets:['南瓜先生'], lv:100},
          }
        },
        '战神': {
          desc:'被普攻提攻速，被技能打提吟唱',
          unlock_condition: {
            'I': {pets:['邪骸战士','兽人婴儿'], lv:40},
            'II': {pets:['兽人战士','摩卡'], lv:60},
            'III': {pets:['哥布灵王'], lv:100},
          }
        },
        '奔驰': {
          desc:'提高回避',
          unlock_condition: {
            'I': {pets:['白幽灵','马克'], lv:40},
            'II': {pets:['红蝙蝠','溜溜猴'], lv:60},
            'III': {pets:['幽灵波利'], lv:100},
          }
        },
        '荆棘': {
          desc:'反弹伤害',
          unlock_condition: {
            'I': {pets:['白蚁','蜂兵'], lv:40},
            'II': {pets:['艾吉欧蜈蚣','海葵'], lv:60},
            'III': {pets:['兵蚁'], lv:100},
          }
        }
      };//fuwens
    });
  </script>
</body>
</html>
